<style>
	.page{
		background: #f4f4f4;
		overflow: hidden;
	}
	.publish-head{
		width: 100%;
		overflow: hidden;
		border-top: 2rpx solid #e5e5e5;
	}
	.publish-title{
		height: 82rpx;
		line-height: 82rpx;
		color: #989898;
		background: #fff;
		font-size: 30rpx;
	}
	.publish-text{
		position: relative;
		height: 400rpx;
		background: #fff;
		margin-top: 2rpx;
	}
	.publish-input{
		width: 100%;
		height: 100%;
		padding-left: 41rpx;
	}
	.publish-msg{
		position: absolute;
		left: 41rpx;
		top: 32rpx;
		color: #989898;
		font-size: 29rpx
	}
	.publish-msg-extra{
		font-weight: bold;
	}
	.publish-textarea{
		padding-left: 41rpx;
		padding-top: 32rpx;
		color: #989898;
	}
	.publish-middle{
		margin-top: 8rpx;
		background: #fff;
		padding: 30rpx;
		padding-bottom: 0;
		padding-right: 0;
		overflow: hidden;
		display: flex;
		align-items: flex-start;
	}
	.publish-upload{
		width: 150rpx;
		height: 150rpx;
	}
	.publish-upload image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.publish-have-upload{
		width: 550rpx;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		min-height: 150rpx;
		margin-bottom: 30rpx;
	}
	.image-box{
		width: 150rpx;
		height: 150rpx;
		margin-left: 25rpx;
		margin-bottom: 15rpx;
		position: relative;
		overflow: hidden;
	}
	.image-box .aaa{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.video-box{
		width: 300rpx;
		height: 200rpx;
		position: relative;
		overflow: hidden;
	}
	.video-box video{
		width: 300rpx;
		height: 150rpx;
		display: block;
	}
	.delete-icon{
		width: 100%;
		line-height: 50rpx;
		text-align: center;
		background: rgba(0,0,0,0.5);
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.delete-image{
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(0,0,0,0.5);
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		z-index: 9;
	}
	.publish-have-upload image{
		height: 100%;
		width: 100%;
		border: 1rpx solid #eee;
		border-radius: 7rpx;
	}
	.publish-address{
		height: 71rpx;
		background: #fff;
		margin-top: 8rpx;
		margin-bottom: 18rpx;
	}
	.publish-address-content{
		width: 90%;
		margin: 0 auto;
		padding-top: 15rpx;
	}
	.transfer_address{
		width: 26rpx;
		height: 34rpx;
		float: left;
	}
	.publish-location{
		color: #4c4c4c;
		margin-left: 12rpx;
	}
	.publish-bottom{
		height: 252rpx;
		width: 100%;
	}
	.publish-option-box{
		height: 85rpx;
		line-height: 85rpx;
		background: #fff;
		width: 100%;
		overflow: hidden;
		margin-bottom: 8rpx;
	}
	.publish-attr-none{
		display: none;
	}
	.publish-attr-show{
		display: block;
	}
	.publish-option{
		width: 90%;
		margin: 0 auto;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.publish-option-title{
		font-size: 28rpx;
	}
	.publish-option-choose{
		color: #b1b1b1;
		display: flex;
		align-items: center;
	}
	.publish-option-choose image{
		height: 21rpx;
		width: 12rpx;
		margin-left: 20rpx;
	}
	.publish-symbol{
		color: #f23030;
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	.publish-price{
		width: 115rpx;
		color: #b1b1b1;
	}
	.publish-price-place{
		color: #b1b1b1;
	}
	.publish-attribute{
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 9;
		background: #f6f6f6;
		transform: translateX(100%);
		transition: .3s;
	}
	.publish-must-choose-head{
		height: 61rpx;
		line-height: 61rpx;
		width: 100%;
		overflow: hidden;
		text-indent: 41rpx;
		font-size: 32rpx;
	}
	.must-symbol{
		color: #f55959;
		margin-left: 10rpx;
	}
	.attribute-box{
		background: #fff;
		width: 100%;
		height: auto;
	}
	.attribute-set{
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		height: 100%;
	}
	.attribute-type{
		height: 81rpx;
		font-size: 32rpx;
		line-height: 81rpx;
	}
	.attribute-all{
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.attribute-one{
		width: 215rpx;
		height: 53rpx;
		text-align: center;
		line-height: 53rpx;
		border: 2rpx solid #b3b3b3;
		border-radius: 5rpx;
		float: left;
		margin-right: 10rpx;
		margin-bottom: 15rpx;
	}
	.attribute-one:nth-child(3n+0){
		margin-right: 0rpx !important;
	}
	.attribute-select{
		background: #fac9c9;
		color: #f55959;
		border: 2rpx solid #fac9c9;
	}
	.attribute-line{
		background: #f1f1f1;
		height: 2rpx;
		margin-top: 20rpx;
		width: 100%;
	}
	.attribute-choose{
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		position: fixed;
		bottom: 0rpx;
	}
	.attribute-choose-success{
		background: #f55959 !important;
	}
	.z-show {
		transform: translateX(0) !important;
	}
	.attribute-choose view{
		float: left;
		width: 50%;
		height: 100%;
	}
	.attribute-cancel{
		background: #000;
		color: #fff;
	}
	.attribute-ok{
		background: #ddd;
	}
	.publish-picker:after{
		content: '';
		display: block;
		clear: both;
	}
	.publish-btn-bg{
		width: 100%;
		height: 108rpx;
	}
	.publish-btn{
		background: #f77777;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 8;
	}
	.publish-btn.gray{
		background: #CCCCCC !important;
	}
	.freight-cancel-bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background: rgba(0,0,0,.5);
	}
	.freight-content{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 0 0;
		padding-top: 18rpx;
		transform: translateY(100%);
		transition: .3s;
	}
	.freight-content.show{
		transform: translateY(0) !important;
	}
	.freight-content .input{
		height: 100rpx;
		padding: 0 38rpx;
		position: relative;
	}
	.freight-content .input:first-child{
		border-bottom: 1px solid #e6e6e6;
	}
	.freight-content .input .name{
		font-size: 36rpx;
		margin-right: 30rpx;
	}
	.freight-content .input .rmb{
		font-size: 28rpx;
		margin-right: 10rpx;
		line-height: 52rpx;
	}
	.freight-content .input .num{
		font-size: 40rpx;
		overflow: hidden;
		width: 438rpx;
	}
	.freight-content .input .num .money{
		max-width: 400rpx;
		position: relative;
		min-width: 2rpx;
		height: 52rpx;
		line-height: 52rpx;
	}
	.freight-content .input .num.focus .money:after{
		content: '';
		position: absolute;
		right: -5rpx;
		top: 50%;
		margin-top: -18rpx;
		width: 2rpx;
		height: 36rpx;
		background-image: url('~@/static/images/jewel/cursor2.gif');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
	}
	.freight-content .input .package{
		font-size: 32rpx;
		position: absolute;
		right: 48rpx;
		top: 0;
		height: 100rpx;
	}
	.freight-content .input .package image{
		width: 36rpx;
		height: 36rpx;
		margin-left: 23rpx;
		position: relative;
		z-index: 1;
	}
	.freight-content .input .package image:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #ffffff;
		z-index: -1;
		box-sizing: border-box;
		border: 1px solid #a4a4a4;
		border-radius: 50%;
	}
	.digital-keyboard {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.digital-keyboard .list{
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		width: 600rpx;
	}
	.digital-keyboard .list .num {
		width: 200rpx;
		border: 1px solid #eee;
		height: 110rpx;
		text-align: center;
		color: #333;
		line-height: 110rpx;
		font-size: 40rpx;
		box-sizing: border-box;
	}
	.digital-keyboard .list .num:nth-of-type(3n) {
		border-bottom: 0;
	}
	.digital-keyboard .list .num:nth-of-type(3n+1) {
		border-bottom: 0;
		border-left: 0;
	}
	.digital-keyboard .list .num:nth-of-type(3n+2) {
		border-bottom: 0;
		border-left: 0;
		border-right: 0;
	}
	.digital-keyboard .list .num.back{
		font-size: 34rpx;
	}
	.digital-keyboard .btns{
		flex: 1;
	}
	.digital-keyboard .btns button{
		width: 100%;
		height: 220rpx;
		border-top: 1px solid #eee;
		box-sizing: border-box;
		justify-content: center;
	}
	.digital-keyboard .btns .del image{
		width: 62rpx;
		height: 42rpx;
	}
	.digital-keyboard .btns .sure{
		background: #ff5240;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.m-full-loading{
		background-color: transparent;
	}
</style>
<template>
	<view class="page">
		<view class="publish-head">
			<view class="publish-text">
				<view class="publish-msg" :style="{'display': isShow == '1' ? 'block' : 'none'}">
					<text class="publish-msg-extra">宝贝描述</text>
					<br />转手原因、入货渠道、尺寸规格、新旧程度和使用感受等~
				</view>
				<textarea v-model="content" class="publish-textarea" :adjust-position="false" @focus="text_focus" @blur="text_blur" @input="text_input"/>
			</view>
		</view>
		<!-- <ss-upload-image :url="url" :file-list="fileList" :name="name" @on-success="onSuccess" @on-error="onError" @on-remove="onRemove" @on-process="onProcess"></ss-upload-image> -->
		<view class="publish-middle">
			<view class="publish-upload" v-if="type != 2" @tap="choose_file">
				<image src="../../static/icons/transfer/transfer_choose_image.png" mode=""></image>
			</view>
			<view class="publish-have-upload">
				<view class="item" v-for="(item, index) in imageList" :key="index">
					<view class="image-box" v-if="type == 1" >
						<image :src="item.url"></image>
						<view class="delete-image" @tap="delete_image" :data-cur="index" :data-original="item.original">删除</view>
					</view>
					
					<view class="video-box" v-if="type == 2">
						<video :src="item.url" controls :poster="item.poster?item.poster:'https://api.gdhenglang.com/uploads/video.jpg'"></video>
						<view class="delete-icon" @tap="delete_image" :data-cur="index" :data-original="item.original" :data-savename="item.save_name">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="publish-address">
			<view class="publish-address-content" @tap="showMulLinkageThreePicker">
				<image src="../../static/icons/transfer/transfer_address.png" class="transfer_address" mode=""></image>
				<text class="publish-location">{{pickerText}}</text>
			</view>
		</view>
		<!-- 地址框 -->
		<mpvue-city-picker :themeColor="themeColor" :Maskwhite="true" ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
		<view class="publish-bottom">			
			<view class="publish-option-box">
				<view class="publish-option">
					<view class="publish-option-title">
						价格
					</view>
					<view class="publish-option-choose">
						<text class="publish-symbol">￥</text>
						<input type="digit" v-model="buyout_price" class="publish-price" placeholder-class='publish-price-place' placeholder="请填写" />
					</view>
				</view>
			</view>
			<view class="publish-btn-bg"></view>
		</view>		
		<view class="publish-btn" v-if="isUpdata" @tap="release">发布宝贝</view>
		<view class="publish-btn gray" v-else>发布宝贝</view>
		<!-- 运费 -->
		<view class="freight-cont">
			<view class="freight-cancel-bg" v-if="isPopup" @tap="togglePopup"></view>
			<view class="freight-content" :class="{'show':isPopup}">
				<view class="input flex">
					<view class="name">报价</view>
					<view class="num flex" :class="{'focus':isOfferFocus}" @tap="offerInput"><text class="rmb">￥</text><text class="money">{{offerNum}}</text></view>
				</view>
				<view class="input flex">
					<view class="name">运费</view>
					<view class="num flex" :class="{'focus':isFreightFocus}" @tap="freightInput"><text class="rmb">￥</text><text class="money">{{freightNum}}</text></view>
					<view class="package flex" @click="toggleChecked">包邮<image :src="isChecked?'../../static/icons/jewel/line_icon.png':'../../static/icons/pay-select.png'"></image></view>
				</view>
				<view class="digital-keyboard">
					<view class="list">
						<view class="num" v-for="(item,index) in digitalList" :key="index" :class="{'back':index==9}" @tap="getNum(item)">{{item}}</view>
					</view>
					<view class="btns">
						<button class="del flex" @tap="freightDel"><image src="../../static/icons/transfer/plate-del.png"></image></button>
						<button class="sure flex" @tap="freightSure">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 运费 end-->
		<view class="m-full-loading" v-if="bIsShowLoading">
			<view class="m-loading">
				<image src="../../static/images/loading.gif" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common.js';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import area from '@/components/mpvue-citypicker/city-data/area.js';
	import city from '@/components/mpvue-citypicker/city-data/city.js';
	import province from '@/components/mpvue-citypicker/city-data/province.js';
	export default { 
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				themeColor: '#007AFF',
				placeholder: '',
				isShow: 1,
				content:'',//商品内容
				buyout_price:'',//价格
				imageList: [],//图片列表
				sel_class_name:'', 
				bIsShowLoading: false,
				pickerText: '所在位置',
				province: '',//省 id
				city: '',//市 id
				zone: '',//区 id
				type: 0	,// 1图片，2视频  只能上传其中一个
				isPopup: false,
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '返回', '0', '.'],
				offerNum: '0',
				freightNum: '0',
				isOfferFocus:false,
				isFreightFocus:false,
				isChecked:false,
				video_src:'',
				isUpdata: true
			}
		},
		onLoad() {
			if(!henglang.checkLogin()){
				uni.navigateTo({
					url:'/pages/user/login'
				})
			}
		},
		methods:{
			choose_file(){
				let that = this;
				uni.hideKeyboard()
				if((that.type == 1 && that.imageList.length >= 9) || (that.type == 2 && that.imageList.length >= 1)){
					henglang.showToast('同时最多只可以上传9个图片或者1个视频', 1500);
					return false;
				}
				
				uni.showActionSheet({
					itemList: ['选择图片','选择视频'],
					success: function (res) {
						// #ifdef APP-PLUS
						let num;
						switch(res.tapIndex){
							case 0:
								if(that.type == 2 && that.imageList.length > 0){
									henglang.showToast('图片和视频只可以选择其一', 1500);
									return false;									
								}
								num = 9 - that.imageList.length;
								if(num == 0){
									henglang.showToast('只可以上传9张图片', 1500);
									return false;
								}
								plus.gallery.pick( function(e){
									that.type=1;
									for(var i in e.files){
										let data = {};
										data.url = e.files[i];
										that.uploadFile(data);
									}
								}, function(e) {
									console.log( "取消选择图片" );
								}, {filter:"image",maximum:num,multiple:true,selected:that.imageList,system:false} );
							break;
							case 1:
								if(that.type == 1 && that.imageList.length > 0){
									henglang.showToast('图片和视频只可以选择其一', 1500);
									return false;									
								}
								num = 1 - that.imageList.length;
								if(num == 0){
									henglang.showToast('只可以上传一个视频', 1500);
									return false;
								}
								uni.chooseVideo({
									sourceType: ['album', 'camera'],
									count: 1,
									success: function (res){
										that.type=2;
										let data = {};
										data.url = res.tempFilePath;
										that.uploadFile(data);
										
									}
								})
								// plus.gallery.pick( function(e){
								// 	that.type=2;
								// 	let data = {};
								// 	data.url = e;
								// 	that.uploadFile(data);
								// }, function(e) {
								// 	console.log( "取消选择视频" );
								// }, {filter:"video",maximum:1} );
							break;
							case 2:
							break;
						}
						// #endif
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			uploadFile(data){
				let that = this;
				let upData = {};
				that.bIsShowLoading = true
				if(that.type == 1){
					upData.url = henglang.host + 'Upload/uploadCustom'
					upData.fileType = 'image'
					upData.name = 'photo'
				}else if(that.type == 2){
					upData.url = henglang.host + 'Pawn/upload_video'
					upData.fileType = 'video'
					upData.name = 'video'
				}
				
				uni.uploadFile({
					url: upData.url,
					filePath: data.url,
					fileType: upData.fileType,
					name: upData.name,
					header: {'app-key': henglang.app_key},
					formData: {folder:'pawn','thumb':'350,350'},
					success: (uploadFileRes) => {
						let uploadFileData = JSON.parse(uploadFileRes.data);
						if(uploadFileData.code == '-1') {
							henglang.showToast(uploadFileData.msg, 1500);
							that.imageList = [];
						}else{
							if(that.type == 1){
								data.original = uploadFileData.data.original
								data.postUrl = uploadFileData.data.url
								that.imageList.push(data)
							}else{
								that.imageList.push(data);
								that.video_src = uploadFileData.saveName
								that.imageList[0].poster = uploadFileData.photos_url
								that.imageList[0].postUrl = uploadFileData.photos
								that.imageList[0].save_name = uploadFileData.save_name
								that.imageList[0].original = uploadFileData.original
							}
							that.bIsShowLoading = false
						}
					}
				});
				
			},
			
			showMulLinkageThreePicker() {
			    this.$refs.mpvueCityPicker.show();
				uni.hideKeyboard()
			},
			onConfirm(e) {
			    let val = e.value;
			    this.pickerText = e.label.replace(/-/g, ' ');
			    this.province = province[val[0]].value;
			    this.city = city[val[0]][val[1]].value;
			    this.zone = area[val[0]][val[1]][val[2]].value;
			},
			// 删除图片
			delete_image(e){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除图片吗？',
				    success: function (res) {
				        if (res.confirm) {
				            let cur = e.currentTarget.dataset.cur;
							let original = e.currentTarget.dataset.original;
							let save_name = e.currentTarget.dataset.save_name;
							henglang.post('Pawn/delPhoto',{path:original,type:that.type,save_name:save_name},true,function(res){
								if(res.data.code == 0){
									that.imageList.splice(cur,1);
								}
							});
							if(that.type == 2){
								that.type = 0
							}
				        }
				    }
				});
			},
			text_focus(e){
				let val = e.target.value;
				this.isShow = 0;
			},
			text_blur(e){
				uni.hideKeyboard()
				let val = e.target.value;
				if(val.length == 0) {
					this.isShow = 1;
				}
				this.content = val;
			},
			text_input(e) {
				let val = e.target.value;
				this.isShow = val.length == 0 ? '1' : '0';
			},
			release(){
				let that = this;
				let photo = []
				for(let i in that.imageList){
					photo.push(that.imageList[i].postUrl)
				}
				let sendData={
					title: that.title,
					content: that.content,
					photos: photo,
					buyout_price: that.buyout_price,
					province: that.province,
					city: that.city,
					zone: that.zone,
					video_src:that.video_src
				}
				
				if(sendData.content =='') return henglang.showToast('请填写商品描述');
				if(that.imageList.length == 0) return henglang.showToast('请至少上传一张图片');
				
				that.isUpdata = false
				that.bIsShowLoading = true;
				henglang.post('Pawn/publish',sendData,true,function(res){
					that.bIsShowLoading = false;
					henglang.showToast(res.data.msg,1500);
					if (res.data.code == 0) {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/transfer/publish_success?id=' + res.data.data.id + '&pageTpye=publishOK'
							})
						}, 1500)
					}else{
						that.isUpdata = true
					}
				});
			},
			// 显示隐藏报价模态框
			togglePopup(){
				this.isPopup = !this.isPopup
				this.isFreightFocus = false
				this.isOfferFocus = false
				this.offerNum = this.freightNum = '0'
				this.isChecked = false
			},
			// 点击报价输入
			offerInput(){
				let that = this
				that.offerNum = ''
				that.isOfferFocus = true
				that.isFreightFocus = false
				if(that.freightNum.length === 0){
					that.freightNum = '0'
				}
			},
			// 点击运费输入
			freightInput(){
				let that = this
				that.freightNum = ''
				that.isFreightFocus = true
				that.isOfferFocus = false
				if(that.offerNum.length === 0){
					that.offerNum = '0'
				}
			},
			// 键盘输入
			getNum(val){
				let that = this
				if(val === '返回'){
					that.isPopup = false
				}else if(that.isOfferFocus){
					that.offerNum = that.offerNum.concat(val)
				}else if(that.isFreightFocus){
					that.freightNum = that.freightNum.concat(val)
				}
			},
			// 确认报价
			freightSure(){
				let that = this
				that.isFreightFocus = false
				that.isOfferFocus = false
				if(that.offerNum == 0 || that.offerNum == '.'){
					that.offerInput()
					henglang.showToast('请填写报价');
				}else if(!that.isChecked){
					if(that.freightNum == 0 || that.freightNum == '.'){
						that.freightInput()
						henglang.showToast('请填写运费');
					}
				}
			},
			// 删除输入
			freightDel(){
				let that = this
				if(that.offerNum.length === 0 || that.freightNum.length === 0) return false
				if(that.isOfferFocus){
					that.offerNum = that.offerNum.substr(0,that.offerNum.length-1)
				}else if(that.isFreightFocus){
					that.freightNum = that.freightNum.substr(0,that.freightNum.length-1)
				}
			},
			// 是否包邮
			toggleChecked(){
				let that = this
				that.isChecked = !that.isChecked
				that.isFreightFocus = false
				that.isOfferFocus = false
				if(that.offerNum.length === 0){
					that.offerNum = '0'
				}else if(that.freightNum.length === 0){
					that.freightNum = '0'
				}
			}
		}
	}
</script>